

<template>
    <div class="city-selety">
        <div style="display:flex;">
            <b class="title">{{label}}</b>
            <div class="typeselect">
                <ul>
                    <li v-for="(item ,index) in selectList" :key="index" :class="item.code == activeValue ? 'activeli' : ''" @click="selectHandle(item)" >
                        {{item.city}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    head: {},
    props: {
        label: {
            type: String,
            default:'',
        },
        selectList:{
            type:Array,
            default: function() {
                return []
            }
        },
        activeValue:{
            type: String,
            default:'',
        }
    },
    components: {
       
    },
    data: () => ({

    }),
    computed: {

    },
    watch: {
 

    },
    methods: {

        selectHandle:function(val){
            this.$emit("change",val);
        }

    },
    mounted() {

        
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
    .city-selety{
        margin-bottom: 5px;

        .title{
            padding-top: 4px;
            white-space:nowrap;
        }
        .typeselect ul li {
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
            padding: 4px 8px;
            margin-bottom: 10px;
        }

        .activeli{
            background-color: $primaryColor;
            color: white;
        }
    }



</style>
